<template>
	<view class="page">
		<view class="content">
			<addForm @submitFin="submitFin" v-if="selectIndex==0"> </addForm>
			<examineAndApprove v-if="selectIndex==1"></examineAndApprove>
			<submitted v-if="selectIndex==2"></submitted>
		</view>
		
		<view class="tabbar">
			<view class="item" v-for="(item,index) in tabbarArr" :key="index" @click="changeTabbar(item.id)">
				<u-icon :name="selectIndex == item.id ? item.selectIcon : item.icon" 
				  :color="selectIndex == item.id ? '#4089f0' : '#bbcad3'" size="30"></u-icon>
				<text :class="selectIndex == item.id ? 'activeColor' : ''">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import addForm from './addForm.vue'
	import examineAndApprove from './examineAndApprove.vue'
	import submitted from './submitted.vue'
	export default {
		data() {
			return {
				tabbarArr:[
					{
						icon: 'plus-circle',
						selectIcon : 'plus-circle-fill',
						text : '新申请',
						id: 0
					},
					{
						icon: 'file-text',
						selectIcon : 'file-text-fill',
						text : '审批的',
						id: 1
					},
					{
						icon: 'checkmark-circle',
						selectIcon : 'checkmark-circle-fill',
						text : '已提交',
						id: 2
					},
				],
				selectIndex : 2,
			}
		},
		components: {
			addForm,
			examineAndApprove,
			submitted
		},
		methods: {
			submitFin(){
				setTimeout(()=>{
					this.selectIndex = 2
				},1500)
			},
			changeTabbar(id){
				console.log(id);
				this.selectIndex = id
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	height: 100vh;
	.content{
		height: calc( 100vh - 50px );
	}
	.tabbar{
		height: 50px;
		width: 100vw;
		background: #fff;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			flex: 1;
			transition: 0.5s 0s;
			image{
				width: 50rpx;
			}
			.activeColor{
				color: #4089f0;
			}
			text{
				color: #bbbbbb;
			}
		}
	}
}
</style>
